import echarts from "echarts";
import zrender from "zrender";

const elements = {};

function draw(chart, percentage) {
  var gradient = new echarts.graphic.LinearGradient(0, 0.5, 1, 0.5, [
    {
      offset: 0,
      color: "#00ccff"
    },
    {
      offset: 1,
      color: "#054388"
    }
  ]);

  let zr = chart.getZr();
  let cx = zr.getWidth() / 2;
  let cy = zr.getHeight() / 2;

  let isogon = new zrender.Isogon({
    shape: {
      x: cx,
      y: cy,
      r: 50,
      n: 6
    },
    style: {
      fill: gradient,
      fillOpacity: 0.5,
      stroke: "#009adb",
      lineWidth: 1,
      text: percentage + '%',
      fontSize: "20",
      textFill: "#fff"
    }
  });
  let isogon2 = new zrender.Isogon({
    shape: {
      x: cx,
      y: cy,
      r: 60,
      n: 6
    },
    style: {
      fill: gradient,
      fillOpacity: 0.2,
      stroke: "#009adb",
      lineWidth: 1,
      lineDash: [4]
    }
  });
  
  zr.add(isogon);
  zr.add(isogon2);

  elements.isogon = isogon
  elements.isogon2 = isogon2
}

function update(percentage) {
  elements.isogon.attr({
    style: {
      text: percentage + '%',
    }
  });
}

export default {
  draw,
  update
}
